<template>
	<div class="app">
		<h2>当前sum1为：{{ sum1 }}</h2>
		<h2>当前sum2为：{{ sum2 }}</h2>
		<h2>当前car1为：{{ car1 }}</h2>
	</div>
</template>

<script setup lang="ts" name="App">
/**
 *  https://cn.vuejs.org/api/reactivity-advanced#shallowreadonly 
 * 和 readonly() 不同，
 * 这里没有深层级的转换：只有根层级的属性变为了只读。属性的值都会被原样存储和暴露，这也意味着值为 ref 的属性不会被自动解包了。
 * 
 *  
 *  https://cn.vuejs.org/api/reactivity-advanced#toraw
 */
import { ref, reactive, readonly, shallowReadonly, toRaw, onMounted } from "vue";

let sum1 = ref(0)
// sum2 和 sum1 关联起来了， 但是sum2 是只读的,
let sum2 = readonly(sum1)

let car = {
	brand: '奔驰',
	options: {
		color: '红色',
		price: 100
	}
}

let car1 = reactive(car)

// 转为原始对象 
// toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。
let raw_car = toRaw(car1)

onMounted(() =>{
	console.log('car == row_car ? ',car === raw_car)
	console.log(car,raw_car)

})





</script>

<style scoped>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin: 0 5px;
}
</style>